Define size of inputs etc in pixels rather than em #491
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-491
|
How do we want these components to look on small screens? I've done a manual visual diff before and after
|
hannalaakso
force-pushed
the
remove-em-from-inputs
branch
from
f99587a
to
8fc5556
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-491
|
Thanks @igloosi that's now fixed. Thanks @NickColley 👍 I've requested @dashouse to review the visuals, there might be things we want to adjust. I just added that to the description for clarity. |
hannalaakso
changed the title
|
@hannalaakso my gif is before you made your update, I'll update it now |
|
|
Remove the calls to the `em` function from Frontend, so that all measurements are defined in pixels. The `em` conversions were originally added in an attempt to make form elements line up. However, they cause problems when you try to use Frontend in an application that defines font sizes, especially when those font sizes are nested. This also removes the em() call from `govuk-c-details` as the above problems apply to this component too. For now, `govuk-c-table` still calls `em` - I'll find out from Anika if there's any particular reason tables in Elements used them.
hannalaakso
force-pushed
the
remove-em-from-inputs
branch
from
8fc5556
to
5f4d20c
Compare
|
Neither of @NickColley's GIFs look like what I'm seeing? I see them as perfectly lined up where as your screenshot still has a slight overlap? Intention with these was to retain the physical size of the input at all breakpoints, even though the font-size gets smaller within. |
|
@dashouse I'm on Windows at the moment, so might be fine on OSX |
|
@NickColley What Windows OX/browser/browser version are you using? |
|
@hannalaakso do you want me to raise an issue so this isnt blocked? Edit: |
|
Thanks @NickColley that would be good. I'm not able to replicate this on Browserstack but happy for it to go in the backlog and I can pick it up and have another look in the accessibility lab when I'm in the office. |
hannalaakso
changed the title
|
@hannalaakso Can you make sure we add something to the changelog for this? 🙂 |
|
Done: #520 Thanks for the heads up @36degrees! |
This mirrors the changes made in #491
This mirrors the changes made in #491
This PR removes the calls to the
emfunction from Frontend, so that all measurementsare defined in pixels.
The
emconversions were originally added in an attemptto make form elements line up. However, they cause problems when you try to use
Frontend in an application that defines font sizes, especially when those font
sizes are nested.
This also removes the em() call from
govuk-c-detailsas the above problemsapply to this component too. For now,
govuk-c-tablestill callsem- I'llfind out from Anika if there's any particular reason tables in Elements used
them.
Note: I will review the visuals with @dashouse, there might be things we need to adjust now.
As part of https://trello.com/c/WpPKyqxl/493-5-define-size-of-inputs-etc-in-pixels-rather-than-em